<!DOCTYPE html>
<html lang="en">
<div th:replace="layout/header::copy(${title})"></div>
<body>
    <div class="content" id="app">
        <div> <p>[[${name}]]</p></div>
        <div id="refsh" style="display: none;color: red;">
            <div>更新成功点击刷新</div>
            <button @click="refsh">刷新</button>
        </div>
        <button @click="creatDB" id="db">点击创建数据库</button>
    </div>
</body>
<script src="/js/axios.min.js">
</script>
<script src="/js/sweetalert2.min.js">
</script>
<link rel="stylesheet" type="text/css" href="/css/sweetalert2.min.css">
<script>
    const { createApp, reactive, toRefs } = Vue;

    const EventHandle = {
        setup() {
            const globalData = reactive({
                lists: []
            });

            function creatDB() {
                let that = this;

                axios({
                    url: '/api/mysql/create-table',
                    method: 'post',
                    data: {},
                    headers: {
                        'ApiToken': 'demo_token',
                        'Content-Type': 'application/json; charset=UTF-8',
                    },
                }).then(function(response) {
                    console.log(response)
                    if (response.data.code == 200) {
                        Swal.fire({
                            title: response.data.msg,
                            icon: 'success',
                            timer: 2000,
                        })
                    }else{
                        Swal.fire({
                            text: response.data.msg,
                            icon: 'warning',
                            timer: 2000,
                        })
                    }
                    document.getElementById('db').style.display = 'none';
                    document.getElementById('refsh').style.display = 'block';

                }).catch(function(error) {
                    console.log(error);
                });
            }

            function refsh() {
                window.location.reload();
            }
            return {
                ...toRefs(globalData),
                creatDB,
                refsh
            }
        }
    }

    const app = createApp(EventHandle);
    app.mount("#app");
</script>
<div th:replace="layout/footer::copy"></div>
</html>
